<template>
  <div id="Chart">{{ this.msg }}</div>
</template>

<script>
import * as echarts from 'echarts'

//必须在每个页面都引入
const color1 = '#006acc';
const color2 = '#ff7d18';
const color3 = '#27d775';
export default {
  name: "graph",
  data() {
    return {
      msg: "知识图谱页面",
      initData: {
        'nodes': [
            {
            'name': '感冒',
            'eat': [{
              'name': "银耳莲子汤"
            }, {
              'name': "生姜红糖水"
            }],
            'noEat': [{
              'name': '冰淇淋'
            }, {
              'name': '凉拌菜'
            }, {
              'name': '烧烤'
            }, {
              'name': '冷饮'
            }]
          },
          {
            'name': '糖尿病',
            'eat': [{
              'name': "豆腐炒西兰花"
            }, {
              'name': "木耳炒莴苣"
            }],
            'noEat': [{
              'name': '甜食'
            }, {
              'name': '饮料'
            }, {
              'name': '油炸食品'
            }, {
              'name': '白米饭'
            }]
          },
          {
            'name': '高血压',
            'eat': [{
              'name': "芹菜炒豆腐"
            }, {
              'name': "海带炖排骨"
            }],
            'noEat': [{
              'name': '咸鱼'
            }, {
              'name': '腌菜'
            }, {
              'name': '烧烤'
            }, {
              'name': '油炸食品'
            }]
          },
          {
            'name': '胃溃疡',
            'eat': [{
              'name': "鸡蛋羹"
            }, {
              'name': "猪肚鸡汤"
            }],
            'noEat': [{
              'name': '辣椒'
            }, {
              'name': '咖啡'
            }, {
              'name': '酒'
            }, {
              'name': '油炸食品'
            }]
          },
          {
            'name': '贫血',
            'eat': [{
              'name': "红枣糕"
            }, {
              'name': "猪肝汤"
            }],
            'noEat': [{
              'name': '咖啡'
            }, {
              'name': '茶'
            }, {
              'name': '可乐'
            }, {
              'name': '酒'
            }]
          },
          {
            'name': '骨质疏松',
            'eat': [{
              'name': "牛奶"
            }, {
              'name': "紫菜汤"
            }],
            'noEat': [{
              'name': '咖啡'
            }, {
              'name': '可乐'
            }, {
              'name': '酒'
            }, {
              'name': '油炸食品'
            }]
          },
          {
            'name': '乙肝',
            'eat': [{
              'name': "白萝卜"
            }, {
              'name': "山楂"
            }],
            'noEat': [{
              'name': '油炸食品'
            }, {
              'name': '酒'
            }, {
              'name': '海鲜'
            }, {
              'name': '辣椒'
            }]
          },
          {
            'name': '胆结石',
            'eat': [{
              'name': "苹果"
            }, {
              'name': "绿叶蔬菜"
            }],
            'noEat': [{
              'name': '肥肉'
            }, {
              'name': '油炸食品'
            }, {
              'name': '酒'
            }, {
              'name': '海鲜'
            }]
          },
          {
            'name': '高尿酸血症',
            'eat': [{
              'name': "低脂牛奶"
            }, {
              'name': "蔬菜"
            }],
            'noEat': [{
              'name': '海鲜'
            }, {
              'name': '动物内脏'
            }, {
              'name': '啤酒'
            }, {
              'name': '肥肉'
            }]
          },
            {
          'name': '苯中毒',
          'eat': [{
            'name': "素炒小白菜"
          }, {
            'name': "豆腐干炒韭菜"
          }, {
            'name': '白菜蛋花粥'
          }],
          'noEat': [{
            'name': '海参（水浸）'
          }, {
            'name': '海虾'
          }, {
            'name': '辣椒(青、尖)'
          }, {
            'name': '海蟹'
          },
          ]
        },
          {
            'name': '哮喘',
            'eat': [{
              'name': "芹菜"
            }, {
              'name': "苹果"
            }],
            'noEat': [{
              'name': '海鲜'
            }, {
              'name': '奶制品'
            }, {
              'name': '油炸食品'
            }, {
              'name': '辣椒'
            }]
          },
          {
            'name': '甲亢',
            'eat': [{
              'name': "紫菜"
            }, {
              'name': "苹果"
            }],
            'noEat': [{
              'name': '海鲜'
            }, {
              'name': '奶制品'
            }, {
              'name': '油炸食品'
            }, {
              'name': '辣椒'
            }]
          },
          {
            'name': '痛风',
            'eat': [{
              'name': "樱桃"
            }, {
              'name': "西红柿"
            }],
            'noEat': [{
              'name': '海鲜'
            }, {
              'name': '啤酒'
            }, {
              'name': '动物内脏'
            }, {
              'name': '肥肉'
            }]
          },
          {
            'name': '冠心病',
            'eat': [{
              'name': "全麦面包"
            }, {
              'name': "燕麦"
            }],
            'noEat': [{
              'name': '肥肉'
            }, {
              'name': '油炸食品'
            }, {
              'name': '高脂肪奶制品'
            }, {
              'name': '高糖食品'
            }]
          },
          {
            'name': '脂肪肝',
            'eat': [{
              'name': "豆腐"
            }, {
              'name': "绿叶蔬菜"
            }],
            'noEat': [{
              'name': '肥肉'
            }, {
              'name': '油炸食品'
            }, {
              'name': '高糖食品'
            }, {
              'name': '高脂肪奶制品'
            }]
          },
          {
            'name': '失眠',
            'eat': [{
              'name': "香蕉"
            }, {
              'name': "燕麦"
            }],
            'noEat': [{
              'name': '咖啡'
            }, {
              'name': '可乐'
            }, {
              'name': '巧克力'
            }, {
              'name': '辣椒'
            }]
          },
          {
            'name': '多动症',
            'eat': [{
              'name': "鱼类"
            }, {
              'name': "绿叶蔬菜"
            }],
            'noEat': [{
              'name': '糖分高的食物'
            }, {
              'name': '咖啡因饮料'
            }, {
              'name': '人工色素食物'
            }, {
              'name': '高脂肪食品'
            }]
          },
          {
            'name': '抑郁症',
            'eat': [{
              'name': "鱼类"
            }, {
              'name': "全谷类食品"
            }],
            'noEat': [{
              'name': '酒精'
            }, {
              'name': '咖啡'
            }, {
              'name': '高糖食品'
            }, {
              'name': '加工食品'
            }]
          },
          {
            'name': '胃炎',
            'eat': [{
              'name': "白米饭"
            }, {
              'name': "香蕉"
            }],
            'noEat': [{
              'name': '辛辣食品'
            }, {
              'name': '酒精'
            }, {
              'name': '咖啡'
            }, {
              'name': '油炸食品'
            }]
          },
          {
            'name': '肾病',
            'eat': [
              { 'name': "蔬菜" },
              { 'name': "水果" }
            ],
            'noEat': [
              { 'name': '高钠食品' },
              { 'name': '高磷食品' },
              { 'name': '高蛋白食品' },
              { 'name': '高钾食品' }
            ]
          },
          {
            'name': '胆固醇过高',
            'eat': [{
              'name': "鱼类"
            }, {
              'name': "蔬菜"
            }],
            'noEat': [{
              'name': '高脂肪食品'
            }, {
              'name': '内脏类食物'
            }, {
              'name': '鸡皮'
            }, {
              'name': '黄油'
            }]
          },
          {
          'name': '百日咳',
          'eat': [{
            'name': '黄瓜三丝汤'
          }, {
            'name': '排骨汤'
          }, {
            'name': '黄瓜拌皮丝'
          }, {
            'name': '小黄瓜凉拌面'
          }, {
            'name': '百合双耳鸡蛋羹'
          }, {
            'name': '黄瓜拌兔丝'
          }, {
            'name': '罗汉果雪耳鸡汤'
          }, {
            'name': '清蒸鸡蛋羹'
          }],
          'noEat': [{
            'name': "螃蟹"
          }, {
            'name': "海螺"
          }, {
            'name': "海虾"
          }, {
            'name': "海蟹"
          }],
        }],
        links: [{
          source: '苯中毒',
          target: '素炒小白菜',
          name: 'eat'
        }]
      },
      categories: [{
        name: '疾病',
        itemStyle: {
          color: color1
        }
      },
        {
          name: '食物',
          itemStyle: {
            color: color2
          }
        }],
      resData: [],
      graphData: [],
      graphLinks: []
    };
  },
  mounted() {
    this.loadData();
  },
  methods: {
    draw() {
      let myChart = echarts.init(document.getElementById("Chart"));
      myChart.setOption({
        title: {
          text: '知识图谱',
        },
        // legend: [{
        //   // selectedMode: 'single',
        //   // data: categories.map(x => x.name),
        //   // icon: 'circle'
        // }],
        series: [{
          type: 'graph',
          layout: 'force',
          symbolSize: 58,
          draggable: true,
          roam: true,
          focusNodeAdjacency: true,
          // categories: categories,
          edgeSymbol: ['', 'arrow'],
          edgeSymbolSize: [80, 10],
          edgeLabel: {
            normal: {
              show: true,
              textStyle: {
                fontSize: 100
              },
              formatter(x) {
                return x.data.name;
              }
            }
          },
          label: {
            show: true
          },
          force: {
            repulsion: 2000,
            edgeLength: 120
          },
          data: this.graphData,
          links: this.graphLinks
        }]
      });
    },
    loadData() {
      let me = this;
      me.resData = this.initData;
      for (let i = 0; i < me.resData.nodes.length; i++) {
        me.graphData.push({
          name: me.resData.nodes[i].name,
          symbolSize: 100,
          category: 0
        });
        let eat = me.resData.nodes[i].eat;
        let noEat = me.resData.nodes[i].noEat;
        console.log('eat=' + eat)
        console.log('noEat=' + noEat)
        for (let j = 0; j < eat.length; j++) {
          if (!me.graphData.find(node => node.name === eat[j].name)) {
            me.graphData.push({
              name: eat[j].name,
              symbolSize: 80,
              category: 1
            });
          }
          me.graphLinks.push({
            source: me.resData.nodes[i].name,
            target: eat[j].name,
            type: 'eat'
          });
        }
        for (let k = 0; k < noEat.length; k++) {
          if (!me.graphData.find(node => node.name === noEat[k].name)) {
            me.graphData.push({
              name: noEat[k].name,
              symbolSize: 80,
              category: 1
            });
          }
          me.graphLinks.push({
            source: me.resData.nodes[i].name,
            target: noEat[k].name,
            type: 'noEat'
          });
        }
         }

      let re = me.resData.links;
      for (let i = 0; i < re.length; i++) {
        me.graphLinks.push({
          source: re.source,
          target: re.target,
        })
      }

      // me.graphLinks.push({
      //   source: "d",
      //   target: "s",
      //   name: "3"
      // });
      this.graphData.forEach(node => {
        if (node.category === 0) {
          node.symbolSize = 100;
          node.itemStyle = {
            color: color1
          };
        } else if (node.category === 1) {
          node.itemStyle = {
            color: color2
          };
        } else if (node.category === 2) {
          node.itemStyle = {
            color: color3
          }
        }
      });
      this.graphLinks.forEach(link => {
        link.label = {
          align: 'center',
          fontSize: 10
        };
        if (link.type === 'eat') {
          link.lineStyle = {
            color: color2
          }
        } else if (link.type === 'noEat') {
          link.lineStyle = {
            color: color1
          }
        }
      });
      me.draw();
    }
  },
};
</script>
<style>
#Chart {
  /*background-color: red;*/
  width: 100%;
  height: 625px;
}
</style>
